<template>
    <el-skeleton :loading="loading" :count="20" animated :throttle="800">
        <template #template>
            <el-skeleton-item variant="caption" style="height: 20px;" />

        </template>
        <template #default>
            <el-table :data="computedList" height="600" :default-sort="{ prop: 'dt', order: 'descending' }">
                <el-table-column type="index" label="序号" width="60"></el-table-column>
                <el-table-column label="喜欢" width="60">
                    <template #default="{ row }">
                        <el-button link @click="likeFlag = !likeFlag; song_Id = row.id">
                            <el-icon>
                                <Star />
                            </el-icon>
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="歌名">
                    <template #default="{ row }">
                        <el-link type="success"
                            @click="$router.push('/userplaylistindex/userlikeslist/userlikesdetails/' + row.id)">{{
                                row.name }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="ID" />
                <el-table-column label="歌手列表">
                    <template #default="{ row }">
                        <span v-for="item in row.ar" :key="item.id">
                            歌手: {{ item.name }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="fee" label="版权类型" />
                <el-table-column prop="dt" sortable label="歌曲时长">
                    <template #default="{ row }">
                        {{ msToTime(row.dt) }}
                    </template>
                </el-table-column>
                <el-table-column prop="pop" label="歌曲热度" />
                <el-table-column prop="t" label="上传类型" />
                <el-table-column label="播放列表">
                    <template #default="{ row }">
                        <el-button type="danger" link @click="itemPlay(row)">
                        <el-icon style="font-size: 20px;">
                            <CirclePlusFilled />
                        </el-icon>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="demo-pagination-block pagination">
                <el-pagination v-model:current-page="currentPage"
                    layout="total, prev, pager, next, jumper" :total="likesList?.length"  />
            </div>
        </template>
    </el-skeleton>
</template>
<script>
import { userLikesListInterface, songDetailsInterface, songUrlInterface, lyricsInterface, likeInterface } from '@/api/artist'
import { msToTime } from '@/utils/msToTime'
import { mapMutations, mapState } from 'vuex'
import { Star, CirclePlusFilled } from '@element-plus/icons-vue'
export default {
    data() {
        return {
            likesList: [],
            msToTime: '',
            loading: true,
            likeFlag: true,
            song_Id: '',
            currentPage: 1,
            pageSize: 10
        }
    },
    watch: {
        likeFlag: {
            handler() {
                console.log(this.song_Id, this.likeFlag);
                likeInterface({ id: this.song_Id, like: this.likeFlag }).then(res => {
                    console.log(res);
                })
            }
        }
    },
    components: {
        Star,
        CirclePlusFilled
    },
    computed: {
        ...mapState('playListModule', ['playSongId', 'playStatus', 'audioInfo', 'songInfo', 'songDetails', 'lyric']),
        computedList() {
            return this.likesList.slice((this.currentPage - 1) * this.pageSize, (this.currentPage - 1) * this.pageSize + this.pageSize)
        }
    },
    methods: {
        ...mapMutations('playListModule', ['SET_SONG_INFO', 'SET_PLAY_SONG_ID', 'SET_PLAY_STATUS', 'SET_AUDIO_INFO', 'SET_LYRIC']),

        // 喜欢/不喜欢音乐切换
        // likeToggle(id, like) { 

        //   likeInterface({ id, like }).then(res => {
        //     this.likeFlag = !like;
        //   })
        // },
        getAudioInfo(id) {
            songUrlInterface({ id: this.playSongId, level: 'standard' }).then(async (res) => {
                await lyricsInterface({ id }).then(res => {
                    this.SET_LYRIC(res.lrc.lyric)
                    this.audioInfo.lrc = res.lrc.lyric
                }).finally(() => {
                    this.SET_AUDIO_INFO({
                        // 歌曲id
                        id,
                        // 歌名
                        name: this.songInfo.name || '',
                        //  作者名
                        artist: this.songInfo.ar?.[0].name || '',
                        // 音乐地址
                        url: res?.data?.[0].url,
                        // 音乐封面
                        cover: this.songInfo.al.picUrl || '',
                        // 歌词
                        lrc: this.lyric || ''
                    })
                })
            })
        },

        // 播放单曲
        itemPlay(row) {
            this.SET_PLAY_SONG_ID(row.id)
            this.SET_SONG_INFO(row)
            this.SET_PLAY_STATUS(true);
            this.getAudioInfo(this.playSongId);
        },
        getUserLikesList() {
            userLikesListInterface().then(res => {
                // console.log(res.ids);
                songDetailsInterface({ ids: res.ids.join(',') }).then(res => {
                    this.loading = false;
                    this.likesList = res.songs
                })
            })
        }
    },
    created() {
        this.getUserLikesList()
        this.msToTime = msToTime
    }
}
</script>

<style lang="scss" scoped></style>
